<template>
	<view id="container" class='container'>
		<!-- 二维码 -->
		<view class="qr-box">
			<canvas canvas-id="qrcode" v-show="qrShow"  style="width: 280px; height: 280px;"/>
		</view>
		<view class="">
			{{tip}}
		</view>
		<button @click="container.generateImage">保存喵熊免密登录二维码到相册</button>
	</view>
</template>

<script>
	import SDTime from "silly-datetime";
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				qrShow: false,
				userId: '',
				src: "",
				tip:"expiration:下月1日 00:00:00，到期需重新保存",
			}
		},
		onLoad(option) {
			this.userId = option.userId
			if(new Date().getMonth() + 1==12){
				this.tip='expiration:明年1月1日 00:00:00,到期需重新保存'
			}else{
				this.tip=`expiration:${new Date().getMonth() + 2}月1日 00:00:00,到期需重新保存`
			}
			this.qrFun(this.userId)
		},
		methods: {
			//*按钮*//
			btn: function() {
				plus.gallery.save(this.src, function() {
					console.log("保存图片到相册成功");
				});
			},

			//**生成二维码**//
			qrFun(userId) {
				// #ifdef APP-VUE
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text:JSON.stringify({
						user_id:userId,
						validity:new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).getTime()
					}),
					size: 280,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				}).then((res) => {
					console.log(res)
					this.src = res
				})
				// #endif

			},
			// 保存图片
			getSaveImg(data) {
				uni.showLoading({
					mask: true
				})
				let base64data = data.base64data;
				// console.log("base64data", base64data)
				// return 
				let bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64data, function() {
					console.log("加载Base64图片数据成功");
					let time = Date.now()
					let url = '_downloads/喵熊登录二维码.png';
					uni.hideLoading()

					// return
					bitmap.save(url, {}, function(i) {
						console.log('保存图片成功：' + JSON.stringify(i));
						// 保存图片到相册
						plus.gallery.save(url, function() {
							console.log("保存图片到相册成功");
							uni.showToast({
								icon:"success",
								title:"保存成功!"
							})
							// 图片保存成功后，将临时保存的图片删除
							plus.io.resolveLocalFileSystemURL(
								url,
								function(entry) {
									entry.getMetadata(
										function(
											metadata
										) {
											console
												.log("fileCount=" +
													metadata
													);
											entry
												.remove(); //删除单个文件 _downloads/改文件名

										});
								},
								function(error) {
									// uni.showToast({ title: "下载文件" });
									console.log("error" +
										error
									);
								}
							);
							bitmap.clear()
						});

						bitmap.clear();
					}, function(e) {
						onsole.log('保存图片失败：' + JSON.stringify(e));
						bitmap.clear();
					});
				}, function() {
					console.log('加载Base64图片数据失败：' + JSON.stringify(e));
					bitmap.clear();
				});
			},
		}
	}
</script>
<script module="container" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		data() {
			return {}
		},
		methods: {
			// 获取设备的Dpr值
			getDpr() {
				if (window.devicePixelRatio && window.devicePixelRatio > 1) {
					return window.devicePixelRatio;
				}
				return 1;
			},
			// 截图后保存到本地
			generateImage(event, ownerInstance) {
				// 获取想要转换的dom节点
				var dom = document.getElementById('container');
				html2canvas(dom, {
					// allowTaint: false,
					width: dom.clientWidth,
					height: dom.clientHeight,
					scrollY: 0,
					scrollX: 0,
					useCORS: true
				}).then(function(canv) {
					// 将canvas转换成图片渲染到页面上
					let url = canv.toDataURL('image/jpg'); // base64数据
					console.log(ownerInstance)
					ownerInstance.callMethod('getSaveImg', {
						base64data: url
					})
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
	}

	/* 多行文本 */
	textarea {
		width: 98%;
		height: 250rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.textarea-bg {
		width: 94%;
		border-style: solid;
		border-color: #ff007f;
		font-size: 32rpx;
	}

	button {
		width: 80%;
		margin-top: 180rpx;
		background-color: #ffaa00;
		font-size: 30rpx;
	}

	.qr-box {
		width: 300px;
		height: 300px;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>